<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

    <!-- UI 的挂载点 -->
  <div id="app">

    <!-- 容器：导航、边栏、主题 elcon -->
    <el-container>
        <!-- 页眉 -->
        <el-header>
           <h1>国宾旅游平台</h1>
        </el-header>
        <!-- 容器 -->
        <el-container direction="horizontal">
            <!-- 边栏 -->
            <el-aside>
                <!-- 导航菜单 elmen -->
                <el-menu default-active="" @select="">
                    <el-submenu v-for="(submenus, index) in menus"
                        :index="index + 1"
                        :key="submenus.key">
                        <template slot="title"><i :class="submenus.ic"></i>{{submenus.title}}</template>
                        <el-menu-item v-for="(item, subIndex) in submenus.menus"
                            :index="(index + 1) + '-' + (subIndex + 1)"
                            :key="item.key">
                                {{item.title}}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
                

            </el-aside>
            <!-- 容器 -->
            <el-container direction="vertical">
                <!-- 主体：表格 -->
                <el-main height="">
                    <!-- 日历 elcal -->
                    <!-- <el-calendar  :first-day-of-week="1"></el-calendar> -->
                    
                    <!-- 录入按钮-对话框 elb -->
                    <el-button type="primary" size="default" @click="open = true">录入自由行</el-button>
                    <!-- eldia -->
                    <el-dialog
                        title="录入新的自由行线路"
                        :visible.sync="open"
                        @close="">
                        <!-- 表单 elf -->
                        <el-form :model="item" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">

                            <el-form-item label="路线名">
                                <el-input v-model="item.name"></el-input>
                            </el-form-item>
                            <el-form-item label="代号">
                                <el-input v-model="item.code"></el-input>
                            </el-form-item>
                            <el-form-item label="价格">
                                <el-input v-model="item.price"></el-input>
                            </el-form-item>
                            <el-form-item label="年龄范围">
                                <el-input v-model="item.age"></el-input>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-input v-model="item.type"></el-input>
                            </el-form-item>
                            <el-form-item label="简介">
                                <el-input v-model="item.remark"></el-input>
                            </el-form-item>

                        </el-form>

                        <span slot="footer">
                            <el-button @click="open = false">取消</el-button>
                            <el-button type="primary" @click="add()">录入</el-button>
                        </span>
                    </el-dialog>
                    
                    

                    <!-- 表格 elt -->
                    <el-table :data="tbData" stripe>
                        <el-table-column v-for="col in tbCols"
                            :prop="col.id"
                            :key="col.id"
                            :label="col.label"
                            :width="col.width">
                        </el-table-column>
                        <!-- 静态 -->
                        <el-table-column label="操作">
                            <!-- 插槽 -->
                            <template slot-scope="scope">
                                <el-button type="warning" size="mini" @click="">编辑</el-button>
                                <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                        
                    </el-table>
                    
                    <!-- 分页 elp -->
                    <el-pagination
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        @prev-click="prev()"
                        @next-click="next()"
                        :current-page.sync="current"
                        layout="total, prev, pager, next, jumper"
                        :total="total"
                        :page-size.sync="pageSize"
                        background>
                    </el-pagination>
                    

                </el-main>
                <!-- 页脚 -->
                <el-footer height="">
                    <!-- Footer content -->
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
    

  </div>

</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 网络通信 axios, AJAX 操作 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>
    // 数据与行为交互
    new Vue({
      el: '#app',
      data() {
        return {
            pageSize: 50,
            current: 1,
            total: 0,
            item: {
                name: '',
                code: '',
                price: 0,
                type: '',
                age: '',
                remark: ''
            },
            open: false,
            tbData: [],
            tbCols: [
                {id: 'id', label: '编号'},
                {id: 'name', label: '项目名称'},
                {id: 'code', label: '代号'},
                // {id: 'sex', label: '适用性别'},
                {id: 'age', label: '年龄范围'},
                {id: 'price', label: '价格'},
                // {id: 'type', label: '类型'},
                // {id: 'remark', label: '简介'},
            ],
            menus: [
                {
                    title: '旅游项目',
                    ic: 'el-icon-orange',
                    key: '1',
                    menus: [
                        {title: '自由行', key: '1.1'},
                        {title: '跟团游', key: '1.2'},
                        {title: '旅游套餐', key: '1.3'},
                    ]
                },
                {
                    title: '会员管理',
                    ic: 'el-icon-grape',
                    key: '2',
                    // 子菜单
                    menus: [
                        {title: '会员信息', key: '2.1'},
                        {title: '积分管理', key: '2.2'},
                        {title: '订单管理', key: '2.3'},
                    ]
                },
                {
                    title: '数据统计',
                    key: '3',
                    ic: 'el-icon-coffee'
                },
            ]
        }
      },
      methods: {
        currentChange: function() {
            console.log(`当前 ${this.current}`);

            // GET /api/item?p=1&s=20
            let url = 'http://127.0.0.1:9000/api/item';
            axios.get(url, {
                params: {
                    p: this.current,
                    s: this.pageSize,
                    x: 1,
                    y: 2
                }
            })
            .then(res => {
                console.log(res);
                this.tbData = res.data.page;
                this.total = res.data.total;
            })
        },
        next: function() {
            this.current++;
        },
        prev: function() {
            this.current--;
        },
        // 需要被调用的函数
        load: function() {
            let url = 'http://127.0.0.1:9000/api/item';
            
            // GET url
            axios.get(url)
            .then(res => {
                // 成功，res = response 响应：头、体、状态码
                // console.log(res);
                // 响应包含的数据（响应 body）
                // console.log(res.data);

                // 响应数据赋值给 vue 中实例变量
                this.tbData = res.data.page
                
                this.total = res.data.total;
            })
            .catch(err => {
                // 出错了
                console.error(err); 
            });
        },
        add: function() {
            
            // 关闭对话框
            this.open = false;
            
            let url = 'http://127.0.0.1:9000/api/item';
            // POST url
            axios.post(url,this.item)
            .then(res => {
                console.log(res);
                // 重新查询
                this.load();
            })
            .catch(err => {
                console.error(err); 
            });
        },
        del: function(id) {
            console.log('del ' + id);

            let url = `http://127.0.0.1:9000/api/item/${id}`;
            // DELETE url
            axios.delete(url)
            .then(res => {
                // console.log(res)
                // 重新加载
                this.load();
            })
            .catch(err => {
                console.error(err); 
            })
        },
        update: function() {
            // PUT url
        }
      },
      // 生命周期的回调(callback)函数，钩子(hook)函数
      created() {
        // 调用声明的方法
        this.load();
      },

    })
  </script>
</html>